<template>
  <div id="app">
    <!-- <router-view></router-view>
    <main-tar-bar></main-tar-bar> -->

    <!-- vuex -->
     <!-- 父子组件 -->
     <hello-world-x :counter="counter"></hello-world-x>
    <h2>Vuex</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">add5</button>
    <button @click="addCount(10)">add10</button>

    <h2>
      {{ $store.getters.more20Stu }}
     
    </h2>


    <!-- info 信息-->
     <h2>{{$store.state.info}}</h2>
     <br>
     <button @click="editInfo">修改信息</button>
  </div>
</template>

<script>
import MainTabBar from './components/MainTabbar.vue'
import HelloWorldX from './components/HelloWorldX.vue'
import {addCount} from './store/mutations_type.js'
export default {
  name: 'App',
  components:{
  MainTabBar,
  HelloWorldX
 },
 data(){
  return {
    message: "aaa",
    counter :12
  }
 },
 methods:{
  editInfo(){
    // this.$store.commit('editInfo')
    //dispatch经过action
    this.$store.dispatch('editInfo',"我是携带的信息").then(res=>{
      console.log("完成了提交",res)
    })
  },  
  add(){
    this.$store.commit('increment')
  },
  sub(){
    this.$store.commit('decrement')
  },
  addCount(count){
    this.$store.commit(addCount,count)
    //特殊风格
    // this.$store.commit({
    //   type: "addCount",
    //   count
    // })
  }
 }
}
</script>

